<template>
  <div class="app-header">
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <a class="logo" href="#" target="Logo"><img src="../assets/logo.png" /></a>
      <div class="header-menu-nav">
        <el-menu-item index="1">{{user.company}}</el-menu-item>
        <el-menu-item index="2"><el-popover
          placement="bottom"
          width="300"
          trigger="click"">
          <div class="user-form">
              <div class="user-form-header">
                <div class="user-info">
                  <img class="user-form-img" src="http://jinyuncrmdevelop.oss-cn-hangzhou.aliyuncs.com/uploader/63147bc3abbea9fd3a922ab52900823dd10f2ca2/3923-portraitpng" />
                  <div class="user-form-name"><div class='nick-name'>{{user.name}}</div> <div class="email">{{user.email}}</div></div>
                </div>
              </div>
              <div class="user-form-body">
                
              </div>
          </div>
          <div slot="reference">
            <img class="header-user-img" src="http://jinyuncrmdevelop.oss-cn-hangzhou.aliyuncs.com/uploader/63147bc3abbea9fd3a922ab52900823dd10f2ca2/3923-portraitpng" />{{user.name}}
          </div>
        </el-popover></el-menu-item>
        <el-menu-item index="3"><i class="el-icon-bell"></i></el-menu-item>
        <el-menu-item index="4"><i class="el-icon-question"></i></el-menu-item>
      </div>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: 'Header',
  data () {
    return {
      activeIndex: '1',
      user:{},
    }
  },
  methods: {
    handleSelect(key, keyPath) {
    },
  },
  created:function(){
    this.user = this.$user;
  }
}
</script>

<style scoped>
.logo{
    position: absolute;
    left: 70px;
    top: 3px;
}
.app-header{
  background-color:#23262E;
  position: fixed;
  width: 100%;
  z-index: 999;
}
.header-menu-nav{
    display: inline-flex;
    float: right;
}
.header-user-img{
  width: 24px;
  height: 24px;
  padding: 0 8px;
}
.user-form-header{
  border-bottom: 1px solid #ccc;
  margin: 0 10px;
  padding-bottom: 8px;
}
.user-info .user-form-img{
  width: 52px;
  height: 52px;
}
.user-info .user-form-name{
  display: inline-block;
  position: absolute;
  left: 92px;
}
.user-info .nick-name{
  font-size: 20px;
  margin-bottom: 5px;
}
.user-info .email{
  
}
</style>